<template>
    <div>
      <Title :title="title"></Title>
      {{ ed }}

      <div ref="areaContainer" style="height: 150px; margin-top: 10px;"></div>
    </div>
  </template>
  
  <script>
  import { Area } from '@antv/g2plot';
  import { get } from '@/utils/request';
  import { mapState } from 'vuex';
  
  // 直接引入提供的季度数据（实际项目可替换为接口请求）
  const quarterPopulationData = [
    { "timePeriod": "2006 Q3", "value": 1 },
    { "timePeriod": "2006 Q4", "value": 1.08 },
    { "timePeriod": "2007 Q1", "value": 1.17 },
    { "timePeriod": "2007 Q2", "value": 1.26 },
    { "timePeriod": "2007 Q3", "value": 1.34 },
    { "timePeriod": "2007 Q4", "value": 1.41 },
    { "timePeriod": "2008 Q1", "value": 1.52 },
    { "timePeriod": "2008 Q2", "value": 1.67 },
    { "timePeriod": "2008 Q3", "value": 1.84 },
    { "timePeriod": "2008 Q4", "value": 2.07 },
    { "timePeriod": "2009 Q1", "value": 2.39 },
    { "timePeriod": "2009 Q2", "value": 2.71 },
    { "timePeriod": "2009 Q3", "value": 3.03 },
    { "timePeriod": "2009 Q4", "value": 3.33 },
    { "timePeriod": "2010 Q1", "value": 3.5 },
    { "timePeriod": "2010 Q2", "value": 3.37 },
    { "timePeriod": "2010 Q3", "value": 3.15 },
    { "timePeriod": "2010 Q4", "value": 3.01 },
    { "timePeriod": "2011 Q1", "value": 2.8 },
    { "timePeriod": "2011 Q2", "value": 2.8 },
    { "timePeriod": "2011 Q3", "value": 2.84 },
    { "timePeriod": "2011 Q4", "value": 2.75 },
    { "timePeriod": "2012 Q1", "value": 2.64 },
    { "timePeriod": "2012 Q2", "value": 2.55 },
    { "timePeriod": "2012 Q3", "value": 2.46 },
    { "timePeriod": "2012 Q4", "value": 2.45 },
    { "timePeriod": "2013 Q1", "value": 2.57 },
    { "timePeriod": "2013 Q2", "value": 2.68 },
    { "timePeriod": "2013 Q3", "value": 2.8 },
    { "timePeriod": "2013 Q4", "value": 2.89 },
    { "timePeriod": "2014 Q1", "value": 2.85 },
    { "timePeriod": "2014 Q2", "value": 2.73 },
    { "timePeriod": "2014 Q3", "value": 2.54 },
    { "timePeriod": "2014 Q4", "value": 2.32 },
    { "timePeriod": "2015 Q1", "value": 2.25 },
    { "timePeriod": "2015 Q2", "value": 2.33 },
    { "timePeriod": "2015 Q3", "value": 2.53 },
    { "timePeriod": "2015 Q4", "value": 2.74 },
    { "timePeriod": "2016 Q1", "value": 2.76 },
    { "timePeriod": "2016 Q2", "value": 2.61 },
    { "timePeriod": "2016 Q3", "value": 2.35 },
    { "timePeriod": "2016 Q4", "value": 2.11 },
    { "timePeriod": "2017 Q1", "value": 2.08 },
    { "timePeriod": "2017 Q2", "value": 2.2 },
    { "timePeriod": "2017 Q3", "value": 2.38 },
    { "timePeriod": "2017 Q4", "value": 2.59 },
    { "timePeriod": "2018 Q1", "value": 2.63 },
    { "timePeriod": "2018 Q2", "value": 2.67 },
    { "timePeriod": "2018 Q3", "value": 2.64 },
    { "timePeriod": "2018 Q4", "value": 2.5 },
    { "timePeriod": "2019 Q1", "value": 2.31 },
    { "timePeriod": "2019 Q2", "value": 2.04 },
    { "timePeriod": "2019 Q3", "value": 1.83 },
    { "timePeriod": "2019 Q4", "value": 1.71 },
    { "timePeriod": "2020 Q1", "value": 1.65 },
    { "timePeriod": "2020 Q2", "value": 1.59 },
    { "timePeriod": "2020 Q3", "value": 1.58 }
  ];
  
  export default {
    data() {
      return {
        title: '城市人口流动活跃度季度趋势（2006-2020）',
        params: {
          page: 1,
          pageSize: 100
        },
        populationData: [], // 人口活跃度数据
        areaPlot: null // 面积图实例
      };
    },
  
    computed: {
      ...mapState(['ed'])
    },
  
    // 监听设备/区域变化，更新数据（与颗粒物条形图逻辑一致）
    watch: {
      ed: {
        handler(n) {
          this.params.engineer_id = n.engineer_id;
          this.params.device_id = n.device_id;
          this.getPopulationData();
          // 数据更新后刷新图表
          if (this.areaPlot) {
            this.areaPlot.changeData(this.populationData);
          }
        },
        deep: true
      }
    },
  
    methods: {
      // 初始化面积图（基于提供的Area组件代码改造）
      initAreaChart() {
        // 销毁已有实例，避免重复渲染
        if (this.areaPlot) {
          this.areaPlot.destroy();
        }
  
        this.areaPlot = new Area(this.$refs.areaContainer, {
          data: this.populationData,
          xField: 'timePeriod', // X轴：季度（2006 Q3等）
          yField: 'value', // Y轴：人口流动活跃度指数
          xAxis: {
            range: [0, 1],
            // 适配深色背景：文字白色，避免拥挤
            label: {
              style: { fill: 'white', fontSize: 10 },
              // 间隔显示标签（每4个季度显示1个），避免重叠
              formatter: (time, index) => index % 4 === 0 ? time : ''
            },
            title: {
              text: '季度',
              style: { fill: 'white', fontSize: 12 }
            },
            line: { style: { stroke: 'rgba(255,255,255,0.2)' } }
          },
          yAxis: {
            label: {
              style: { fill: 'white', fontSize: 10 },
              formatter: (val) => `${val} 指数` // 标注数据单位
            },
            title: {
              text: '人口流动活跃度指数',
              style: { fill: 'white', fontSize: 12 }
            },
            line: { style: { stroke: 'rgba(255,255,255,0.2)' } },
            grid: { style: { stroke: 'rgba(255,255,255,0.1)' } }
          },
          // 面积样式：渐变填充，贴合大屏视觉
          areaStyle: {
            fill: 'l(0) 0:#1890FF 1:transparent', // 从蓝色到透明的线性渐变
            fillOpacity: 0.6
          },
          // 线条样式：加粗蓝色，突出趋势
          lineStyle: {
            stroke: '#1890FF',
            lineWidth: 2
          },
          // 数据点：hover时显示，增强交互
          point: {
            visible: false, // 默认隐藏，避免密集
            style: { fill: 'white', stroke: '#1890FF', lineWidth: 2 },
            state: {
              active: { visible: true, size: 6 } // hover时显示数据点
            }
          },
          // 图例：隐藏（单系列数据无需图例，节省空间）
          legend: { visible: false },
          // 提示框：显示季度和具体指数，适配深色背景
          tooltip: {
            formatter: (datum) => {
              return {
                name: datum.timePeriod,
                value: `人口流动活跃度：${datum.value.toFixed(2)} 指数`
              };
            },
            domStyles: {
              'g2-tooltip': {
                backgroundColor: 'rgba(0, 0, 0, 0.7)',
                borderColor: '#1890FF',
                color: 'white',
                fontSize: 12
              }
            }
          },
          // 交互：hover高亮线条和数据点
          interactions: [{ type: 'element-active' }]
        });
  
        this.areaPlot.render();
      },
  
      // 获取人口流动活跃度数据（实际项目可对接接口，此处直接使用提供的静态数据）
      async getPopulationData() {
        try {
          // 1. 实际项目中替换为接口请求（示例）
          // const res = await get('/dashboard/queryPopulationActivity', this.params);
          // this.populationData = res.data.list;
  
          // 2. 此处使用提供的静态数据（模拟接口返回）
          this.populationData = quarterPopulationData;
  
          // 初始化图表
          this.initAreaChart();
        } catch (err) {
          console.error('获取人口活跃度数据失败：', err);
          // 异常时仍使用静态数据，避免图表空白
          this.populationData = quarterPopulationData;
          this.initAreaChart();
        }
      }
    },
  
    // 组件挂载时加载数据和图表（与颗粒物条形图逻辑一致）
    async mounted() {
      await this.getPopulationData();
      this.initAreaChart();
    },
  
    // 组件销毁时清理图表实例，避免内存泄漏
    beforeDestroy() {
      if (this.areaPlot) {
        this.areaPlot.destroy();
      }
    }
  };
  </script>
  
  <style lang="less" scoped></style>